<template>
  <div>
    <div>
      <Card :bordered="false" dis-hover class="mt15 ivu-mt" :padding="0">
        <div class="new_card_pd">
          <Form ref="tableFrom" inline
                :model="tableFrom" :label-width="labelWidth"
                :label-position="labelPosition" @submit.native.prevent>
            <FormItem label="规则状态：" label-for="status">
              <Select v-model="tableFrom.status" placeholder="请选择" clearable @on-change="userSearchs"
                      style="width: 250px;">
                <Option value="1">使用</Option>
                <Option value="0">不使用</Option>
              </Select>
            </FormItem>
            <FormItem label="规则名称：" label-for="coupon_title">
              <Input v-model="tableFrom.title" placeholder="请输入规则名称" @on-search="userSearchs"
                     style="width: 250px;margin-right:14px"/>
              <Button type="primary" @click="orderSearch()" style="margin-right:14px">查询</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
      <!--      充值卡表格 -->
      <Card :bordered="false" dis-hover class="ivu-mt">
        <Button v-auth="['admin-user-recharcard-rule-add']" type="primary" @click="add">添加提货卡规则</Button>
        <Table :columns="columns1" :data="tableList" ref="table" class="ivu-mt"
               :loading="loading" highlight-row
               no-userFrom-text="暂无数据"
               no-filtered-userFrom-text="暂无筛选结果">
          <template slot-scope="{ row }" slot="title">
            <span>{{ row.title }}</span>
          </template>

          <template slot-scope="{ row }" slot="content">
            <div v-html="row.content"></div>
          </template>

          <template slot-scope="{ row }" slot="status" >
            <i-switch v-model="row.status" :value="row.status" :true-value="1" :false-value="0" size="large"
                      @on-change="openChange(row)" style = "width:30%">
              <span slot="open">使用</span>
              <span slot="close">不使用</span>
            </i-switch>
          </template>

          <template slot-scope="{ row }" slot="add_time">
            <Tooltip max-width="200" placement="bottom">
              <span class="line2">{{ row.add_time }}</span>
            </Tooltip>
          </template>

          <template slot-scope="{ row }" slot="update_time">
            <span>{{row.update_time}}</span>
          </template>

          <template slot-scope="{ row }" slot="action">
            <a @click="editrule(row)">修改</a>
            <a @click="recharcardRuleDel(row.id)" style="margin-left:10px;">删除</a>
          </template>

        </Table>
        <div class="acea-row row-right page">
          <Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
                :page-size="tableFrom.limit"/>
        </div>
      </Card>
      <Modal
          v-model="modal"
          title="提示"
          @on-ok="ok"
          @on-cancel="cancel">
        <p>确定要删除吗?</p>
      </Modal>


    </div>
  </div>
</template>

<script>
import {recharcardRuleList,recharcardRuleDelApi,recharcardRuleStatus} from '@/api/user.js'
import {mapState} from "vuex";
export default {
  name: "rule",
  data(){
    return{
      //表格表头
      columns1: [
        {
          title: "ID",
          key: "id",
          width: 80
        },
        {
          title: "规则名称",
          slot: "title",
          minWidth: 80
        },
        {
          title: "规则内容",
          slot: "content",
          minWidth: 100
        },
        {
          title: "规则状态",
          slot: "status",
          minWidth: 80
        },
        {
          title: "添加时间",
          slot: "add_time",
          minWidth: 80
        },
        {
          title: "更新时间",
          slot: "update_time",
          minWidth: 100
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 200
        }
      ],
      //表格数据数组
      tableList:[],
      tableFrom: {
        status: "",
        title: "",
        page: 1,
        limit: 15
      },
      total: 0, //记录表格总行数
      loading: false,
      modal: false,
    }

  },
  created(){
    this.recharcardRuleList() ;
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 96;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    }
  },
  methods:{
    //提货卡规则状态 开启关闭
    openChange(row){
      var data = {
        status : row.status
      }
      recharcardRuleStatus(row.id,data).then(res=>{
        this.$Message.success(res.msg);
      })
          .catch((err) => {
            this.$Message.error(err.msg);
          });
    },
    //查询
    orderSearch(){
      this.recharcardRuleList()
    },
    //添加提货卡规则
    add() {
      this.$router.push({path: "/admin/user/recharcard/rule/add"});
    },
    //修改提货卡规则列表
    editrule(row){
      this.$router.push({ path : "/admin/user/recharcard/rule/add?id=" + row.id }) ;
    },
    ok() {
      recharcardRuleDelApi(this.id).then(res=>{
        this.$Message.success(res.msg);
        this.modal = false
        this.recharcardRuleList()
      })
          .catch((err) => {
            this.$Message.error(err.msg);
          });
    },
    //删除弹窗提示
    cancel(){
      this.modal = false;
    },
    //点击删除某一项删除提货卡规则
    recharcardRuleDel(id){
      this.id = id
      console.log ('del', id);
      this.modal = true
    },
    //提货卡规则列表接口
    recharcardRuleList() {
      recharcardRuleList(this.tableFrom).then( res => {
        this.tableList = res.data.list
        this.total = res.data.count
      })
          .catch(
              (err => {
                this.$Message.error(err.msg);
              })
          )
    },
    pageChange(e) {
      this.tableFrom.page = e
      this.recharcardRuleList(this.rowId);
    },
    // 表格搜索
    userSearchs() {
      this.tableFrom.page = 1;
      this.recharcardRuleList();
    },

  }

}
</script>

<style scoped>

</style>